<template>
    <div 
      ref="nonoContainerRef"
      class="nono-container" 
      :class="{ 'is-visible': mascot.isVisible, 'is-minimized': isMinimized }" 
      :style="{ top: position.y + 'px', left: position.x + 'px' }"
      @mousedown="handleMouseDown"
    >
      <div class="final-nono" :class="mascot.mood" @click.stop="handleClick">
          <div class="nono-wing left"></div>
          <div class="nono-wing right"></div>
          <div class="nono-body">
              <div class="nono-ear left"></div>
              <div class="nono-ear right"></div>
              <div class="nono-panel-line-v"></div>
              <div class="nono-panel-line-h"></div>
              <div class="nono-visor">
                  <div class="nono-visor-glare"></div>
                  <div class="nono-eye left"></div>
                  <div class="nono-eye right"></div>
              </div>
          </div>
          <div class="zzz z1">Z</div>
          <div class="zzz z2">z</div>
          <div class="zzz z3">Z</div>
          <div class="confetti-container">
              <div class="confetti p1"></div><div class="confetti p2"></div>
              <div class="confetti p3"></div><div class="confetti p4"></div>
              <div class="confetti p5"></div><div class="confetti p6"></div>
              <div class="confetti p7"></div><div class="confetti p8"></div>
              <div class="confetti p9"></div><div class="confetti p10"></div>
          </div>
      </div>
      <div class="speech-bubble" v-if="!isMinimized" @mousedown.stop>
          <div class="bubble-content" v-html="mascot.message"></div>
          <div class="bubble-buttons" v-if="mascot.buttons.length > 0">
              <el-button v-for="(btn, index) in mascot.buttons" :key="index" type="primary" size="small" @click.stop="btn.action">{{ btn.text }}</el-button>
          </div>
          <el-button class="close-button" :icon="Close" circle text @click.stop="mascot.hide()"></el-button>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref, reactive, onBeforeUnmount } from 'vue';
  import { useMascotStore } from '../stores/mascotStore';
  import { Close } from '@element-plus/icons-vue';
  
  const mascot = useMascotStore();
  const isMinimized = ref(false);
  
  const nonoContainerRef = ref(null);
  const position = reactive({ x: window.innerWidth - 400, y: window.innerHeight - 120 });
  let isDragging = false;
  let hasDragged = false;
  let dragStartX, dragStartY, initialX, initialY;
  
  const handleMouseDown = (event) => {
      hasDragged = false;
      isDragging = true;
      
      dragStartX = event.clientX;
      dragStartY = event.clientY;
      initialX = position.x;
      initialY = position.y;
  
      document.addEventListener('mousemove', handleMouseMove);
      document.addEventListener('mouseup', handleMouseUp);
  };
  
  const handleMouseMove = (event) => {
      if (!isDragging) return;
      
      const dx = event.clientX - dragStartX;
      const dy = event.clientY - dragStartY;
  
      if (Math.abs(dx) > 5 || Math.abs(dy) > 5) {
          hasDragged = true;
          mascot.resetInactivityTimer();
      }
  
      position.x = initialX + dx;
      position.y = initialY + dy;
  };
  
  const handleMouseUp = () => {
      isDragging = false;
      document.removeEventListener('mousemove', handleMouseMove);
      document.removeEventListener('mouseup', handleMouseUp);
  };
  
  onBeforeUnmount(() => {
      document.removeEventListener('mousemove', handleMouseMove);
      document.removeEventListener('mouseup', handleMouseUp);
      if(mascot.inactivityTimer) clearTimeout(mascot.inactivityTimer);
  });
  
  const handleClick = () => {
      if (!hasDragged) {
          toggleMinimize();
      }
  }
  
  const toggleMinimize = () => {
      if (mascot.isVisible) {
          isMinimized.value = !isMinimized.value;
      }
  }
  </script>
  
  <style scoped>
  .nono-container{position:fixed;z-index:2000;display:flex;align-items:flex-end;gap:15px;transform:scale(0);transform-origin:bottom right;transition:transform .4s cubic-bezier(.175,.885,.32,1.275);cursor:move}.nono-container.is-visible{transform:scale(1)}.nono-container.is-minimized .speech-bubble{display:none}.final-nono{width:80px;height:80px;position:relative;animation:nono-float 3s ease-in-out infinite;cursor:pointer;flex-shrink:0}.speech-bubble{width:300px;padding:20px;background-color:#fff;border-radius:16px;box-shadow:0 8px 25px rgba(0,0,0,.15);border:1px solid #e0e6ed;position:relative;animation:bubble-pop-in .4s ease-out;cursor:default}@keyframes bubble-pop-in{from{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}.bubble-content{line-height:1.6;color:#303133}.bubble-buttons{margin-top:15px;display:flex;gap:10px}.close-button{position:absolute;top:8px;right:8px}
  
  /* --- Mood Animations --- */
  @keyframes nono-float { 50% { transform: translateY(-6px); } }
  
  /* “开心”时，左右摇摆地跳动，更活泼 */
  @keyframes nono-happy-wiggle {
    0% { transform: translateY(0) rotate(0); }
    25% { transform: translateY(-12px) rotate(8deg); }
    50% { transform: translateY(0) rotate(0); }
    75% { transform: translateY(-12px) rotate(-8deg); }
    100% { transform: translateY(0) rotate(0); }
  }
  .final-nono.happy { animation: nono-happy-wiggle 1.5s ease-in-out infinite; }
  .final-nono.happy .nono-wing { animation-duration: 1s; }
  /* 【新增】开心时显示礼花 */
  .final-nono.happy .confetti-container { display: block; }
  
  /* “思考”时的动画（保持不变） */
  .final-nono.thinking { animation: nono-float 1s ease-in-out infinite; }
  
  /* “瞌睡”时，身体轻微晃动，同时冒出 Zzz */
  @keyframes nono-sleepy-bob {
    50% { transform: translateY(2px) rotate(1deg); }
  }
  .final-nono.sleepy { animation: nono-sleepy-bob 3s ease-in-out infinite; }
  .final-nono.sleepy .nono-eye { height: 4px; transform: translateY(8px); }
  .final-nono.sleepy .zzz { display: block; }
  
  /* Zzz 动画效果 */
  .zzz {
    display: none;
    position: absolute;
    top: -10px;
    right: -5px;
    font-size: 18px;
    font-weight: bold;
    color: #a0cff1;
    opacity: 0;
    animation: zzz-float 2s linear infinite;
  }
  .zzz.z2 { font-size: 14px; animation-delay: 0.7s; }
  .zzz.z3 { font-size: 22px; animation-delay: 1.3s; }
  
  @keyframes zzz-float {
    0% { transform: translateY(0) translateX(0); opacity: 0; }
    25% { transform: translateY(-15px) translateX(5px); opacity: 1; }
    75% { transform: translateY(-45px) translateX(-10px); opacity: 1; }
    100% { transform: translateY(-60px) translateX(5px); opacity: 0; }
  }
  /* 【核心修正】礼花特效 */
.confetti-container {
    display: none;
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
}
.confetti {
    position: absolute;
    width: 6px;
    height: 10px;
    background: #f00;
    top: 50%;
    left: 50%;
    opacity: 0;
    transform-origin: center;
    animation: confetti-burst 2s ease-out infinite;
}
/* 动画：从中心点向四周飞散 */
@keyframes confetti-burst {
    0% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
    100% { transform: translate(var(--x-end), var(--y-end)) scale(0) rotateZ(360deg); opacity: 0; }
}
/* 为每个礼花粒子定义不同的终点坐标和颜色 */
.confetti.p1  { background: #f94144; --x-end: -90px; --y-end: -80px; animation-delay: 0.1s; }
.confetti.p2  { background: #f3722c; --x-end: 90px;  --y-end: -75px; animation-delay: 0.2s; }
.confetti.p3  { background: #f8961e; --x-end: -70px; --y-end: 80px;  animation-delay: 0.3s; }
.confetti.p4  { background: #f9c74f; --x-end: 75px;  --y-end: 90px;  animation-delay: 0.4s; }
.confetti.p5  { background: #90be6d; --x-end: -110px;--y-end: 10px;  animation-delay: 0.5s; }
.confetti.p6  { background: #43aa8b; --x-end: 100px; --y-end: 20px;  animation-delay: 0.6s; }
.confetti.p7  { background: #4d908e; --x-end: -80px; --y-end: -30px; animation-delay: 0.7s; }
.confetti.p8  { background: #577590; --x-end: 85px;  --y-end: 40px;  animation-delay: 0.8s; }
.confetti.p9  { background: #277da1; --x-end: -95px; --y-end: 50px;  animation-delay: 0.9s; }
.confetti.p10 { background: #f94144; --x-end: 90px;  --y-end: -90px; animation-delay: 1s; }

  
  /* 诺诺身体的详细样式，保持不变 */
  .nono-body{width:100%;height:100%;background:radial-gradient(circle at 50% 40%,#fff,#dde2e8);border-radius:50%;border:1px solid #b0b9c8;box-shadow:0 4px 8px rgba(0,0,0,.2);position:relative;overflow:visible}.nono-panel-line-v,.nono-panel-line-h{position:absolute;background:#c8d0dc;z-index:1}.nono-panel-line-v{width:1px;height:100%;top:0;left:50%;transform:translateX(-50%)}.nono-panel-line-h{height:1px;width:100%;left:0;top:50%;transform:translateY(-50%)}.nono-ear{width:20px;height:26px;background-color:#fff;border:1px solid #b0b9c8;position:absolute;top:-8px;z-index:0;clip-path:polygon(50% 0,100% 100%,0 100%)}.nono-ear::after{content:'';position:absolute;width:100%;height:100%;top:0;left:0;background:radial-gradient(circle at 50% 100%,#00d1ff,transparent 70%);opacity:.5}.nono-ear.left{left:12px;transform:rotate(-15deg)}.nono-ear.right{right:12px;transform:rotate(15deg)}.final-nono.thinking .nono-ear.left{animation:nono-ear-twitch-left .5s ease-in-out infinite alternate}.final-nono.thinking .nono-ear.right{animation:nono-ear-twitch-right .5s ease-in-out infinite alternate}@keyframes nono-ear-twitch-left{to{transform:rotate(-20deg) translateY(-2px)}}@keyframes nono-ear-twitch-right{to{transform:rotate(20deg) translateY(-2px)}}.nono-wing{width:24px;height:24px;background-color:#00d1ff;position:absolute;top:50%;transform:translateY(-50%);filter:blur(6px);box-shadow:0 0 15px #00d1ff,0 0 22px #00d1ff;clip-path:polygon(0 50%,100% 0,100% 100%);animation:nono-wing-flap 3s ease-in-out infinite}@keyframes nono-wing-flap{50%{transform:translateY(-50%) scale(1.1);opacity:.8}}.nono-wing.left{left:-12px}.nono-wing.right{right:-12px;transform:translateY(-50%) scaleX(-1);animation-name:nono-wing-flap-right}@keyframes nono-wing-flap-right{50%{transform:translateY(-50%) scaleX(-1) scale(1.1);opacity:.8}}.nono-visor{width:75%;height:75%;background:#222;border-radius:50%;position:absolute;z-index:2;top:12.5%;left:12.5%;display:flex;justify-content:center;align-items:center;gap:10px}.nono-visor-glare{width:50%;height:25%;background:rgba(255,255,255,.1);border-radius:50%;position:absolute;top:15%;left:15%;transform:rotate(-30deg)}.nono-eye{width:8px;height:22px;background:#00d1ff;border-radius:4px;box-shadow:0 0 10px #00d1ff;transition:all .2s ease}.final-nono.thinking .nono-eye{background:#fff;box-shadow:0 0 12px #fff;animation:nono-eye-blink 1s infinite}@keyframes nono-eye-blink{50%{transform:scaleY(.1)}}
  </style>